<template>
  <div class="login-form-wrapper">
    <div class="login-form-error-msg">{{ errorMessage }}</div>
    <a-form
      ref="formRef"
      :rules="rules"
      class="register-form"
      :model="form"
      :style="{ width: '600px' }"
      size="large"
      @submit="handleSubmit"
    >
      <a-form-item field="userAccount" label="用户账号" validate-trigger="blur">
        <a-input v-model="form.userAccount" placeholder="请输入用户账号..." />
      </a-form-item>
      <a-form-item field="userPassword" label="密码" validate-trigger="blur">
        <a-input-password
          v-model="form.userPassword"
          placeholder="请输入密码..."
        />
      </a-form-item>
      <a-form-item
        field="checkPassword"
        label="确认密码"
        validate-trigger="blur"
      >
        <a-input-password
          v-model="form.checkPassword"
          placeholder="请确认密码..."
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit">Submit</a-button>
          <a-button @click="resetForm">Reset</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { userRegisterUsingPost } from '@/api/userController';
  import UserRegisterRequest = API.UserRegisterRequest;

  const router = useRouter();
  const errorMessage = ref('');
  const formRef = ref<any>();

  const handleSubmit = async ({ values, errors }) => {
    if (!errors) {
      await userRegisterUsingPost(values as UserRegisterRequest);
      errorMessage.value = '注册成功';
      router.push('/login');
    }
  };

  const form = reactive({
    userAccount: '',
    userPassword: '',
    checkPassword: '',
  });

  const rules = {
    userAccount: [
      {
        required: true,
        message: 'name is required',
      },
    ],
    userPassword: [
      {
        required: true,
        validator: (value: string, cb: (arg0: string) => void) => {
          if (!value) {
            cb('密码是必填项');
          } else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/.test(value)) {
            cb('密码必须包含字母和数字，且长度不少于8位');
          }
        },
      },
    ],
    checkPassword: [
      {
        required: true,
        message: 'password is required',
      },
      {
        validator: (value, cb) => {
          if (value !== form.userPassword) {
            cb('两次密码不一致');
          } else {
            cb();
          }
        },
      },
    ],
  };
  const resetForm = () => {
    if (formRef.value) {
      formRef.value.resetFields();
    }
  };
</script>

<style lang="less" scoped>
  .register-form {
    &-wrapper {
      width: 320px;
    }

    &-title {
      color: var(--color-text-1);
      font-weight: 500;
      font-size: 24px;
      line-height: 32px;
    }

    &-sub-title {
      color: var(--color-text-3);
      font-size: 16px;
      line-height: 24px;
    }

    &-error-msg {
      height: 32px;
      color: rgb(var(--red-6));
      line-height: 32px;
    }

    &-password-actions {
      display: flex;
      justify-content: space-between;
    }

    &-register-btn {
      color: var(--color-text-3) !important;
    }

    .login-form-password-actions {
      display: flex;
      justify-content: flex-end; /* 右对齐 */
    }
  }
</style>
